<template>
  <div>
    <div v-if="cate!=5">
      <div class="header">
        <van-search
          v-model="key"
          :placeholder="'输入关键字搜索'+tabList[activeTab]['title']"
          show-action
          shape="round"
          @search="onSearch"
        >
          <div slot="action" @click="onSearch">搜索</div>
        </van-search>
      </div>

      <div class="main">
        <app-notice/>
        <van-tabs v-model="active_area" @click="onTabChange">
          <van-tab title="全部地区"></van-tab>
          <van-tab v-for="(v,index) in areaArr" :key="index" :title="v"></van-tab>
        </van-tabs>
        <van-tabs v-model="active_type" @click="onTabChange">
          <van-tab title="全部类型"></van-tab>
          <van-tab v-for="(v,index) in typeArr" :key="index" :title="v"></van-tab>
        </van-tabs>

        <h2 class="btt mobies" @click="refresh">
          <div style="line-height:20px;height:20px">
            <van-icon
              :name="tabList[activeTab]['icon']"
              size="15px"
              style="vertical-align: middle;"
            />
            <span
              style="font-size:15px;vertical-align: middle;line-height: 15px;"
            >{{tabList[activeTab]['title']}}({{totalItems}})</span>
          </div>
          <div class="right">power by gsonhub</div>
        </h2>

        <div class="list clearfix">
          <router-link
            v-for="vo in datalist"
            :key="vo.id"
            :to="{ name: 'view', params: { id: vo.cid }}"
          >
            <div class="item" style="position:relative;">
              <div style="width:100%;height:100%;position:absolute;left:0;z-index=999;"></div>
              <div class="image-info">
                <div class="image">
                  <!-- <img :src="vo.image" :alt="vo.title" v-lazy="vo.image" > -->
                  <iframe
                    :src="'img.html?url='+vo.image"
                    frameborder="0"
                    scrolling="no"
                    style="width:100%;box-sizing: border-box;height:100%;"
                  ></iframe>
                </div>
                <div class="info">
                  <div class="title">{{vo.title}}</div>
                  <div class="icon">
                    <span class="time">
                      <van-icon name="clock-o"/>
                      <span>{{vo.time*1000|dataFormat('MM-dd')}}</span>
                    </span>
                    <span class="like">
                      <van-icon name="like"/>
                      <span>8.8</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </router-link>
        </div>
        <van-pagination
          @change="onPageChange"
          v-model="currentPage"
          :total-items="totalItems"
          :show-page-size="4"
          force-ellipses
          :items-per-page="perPage"
        />
      </div>
      <!-- <app-foot/> -->
    </div>
    <!-- <div v-if="cate==6">
      <livePage/>
    </div> -->
    <div v-if="cate==5">
      <userPage/>
    </div>
    <van-tabbar v-model="activeTab" @change="onTabBarChange">
      <van-tabbar-item v-for="v in tabList" :key="v.icon" :icon="v.icon">{{v.title}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {
  Search,
  Icon,
  Toast,
  Lazyload,
  Pagination,
  Row,
  Col,
  Button,
  Tabbar,
  TabbarItem,
  tabs,
  tab
} from 'vant';

import AppFoot from './component/foot';
import AppNotice from './component/notice';
import userPage from './user';
import livePage from './live_list';
import Vue from 'vue';
import VideoModel from '@/vendor/video';
import { setTimeout } from 'timers';

Vue.use(Lazyload, {
  loading: 'img/load.gif',
  error:
    ''
});

export default {
  name: 'listPage',
  components: {
    [Pagination.name]: Pagination,
    [Search.name]: Search,
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Col.name]: Col,
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [tabs.name]: tabs,
    [tab.name]: tab,
    AppFoot,
    AppNotice,
    userPage,
    livePage
  },
  data() {
    return {
      key: '',
      totalItems: 9,
      currentPage: 1,
      cate: 2,
      perPage: 30,
      datalist: [],
      activeTab: 1,
      active_area: 0,
      areaArr: [],
      active_year: 3,
      yearArr: [],
      active_type: 0,
      typeArr: [],
      placeholder: '',
      tabList: [
        { icon: 'video-o', title: '电影' },
        { icon: 'tv-o', title: '电视剧' },
        { icon: 'play-circle-o', title: '综艺' },
        { icon: 'smile-comment-o', title: '动漫' },
        // { icon: "like-o", title: "美女" },
        // { icon: "live", title: "直播" },
        { icon: 'user-o', title: '我的' }
      ]
    };
  },
  mounted() {
    // try {
    this.init();
    // } catch (e) {
    //   location.reload();
    // }
  },

  computed: {},
  beforeRouteUpdate(to, from, next) {
    next();
    try {
      this.init();
    } catch (e) {
      location.reload();
    }
  },
  methods: {
    initUser() {
      document.title = `${this.baseTitle}-我的`;
    },
    initLive() {
      document.title = `${this.baseTitle}-直播`;
    },
    init() {
      this.cate = this.$route.params.cate;
      this.activeTab = this.cate - 1;
      // if (this.cate == 6) {
      //   this.initLive();
      //   return;
      // } else
      if (this.cate == 5) {
        this.initUser();
        return;
      }

      this.key = '';
      let cate = this.tabList[this.activeTab]['title'];
      document.title = `${this.baseTitle}-${cate}`;

      this.typeArr = this.$VIDEO[this.cate]['tag_type'];
      this.yearArr = this.$VIDEO[this.cate]['tag_year'];
      this.areaArr = this.$VIDEO[this.cate]['tag_area'];
      this.active_area = 0;
      this.active_type = 0;
      this.videoModel = new VideoModel();

      Toast.loading({ mask: false, loadingType: 'spinner', duration: 0 });
      this.initDb(this.cate, 'video').then(() => {
        this.videoModel.getTotalItems(this.cate).then(totalItems => {
          this.totalItems = totalItems;
          Toast.clear();
          this.getPage();
        });
      }).catch((e) => {
        Toast.clear();
        console.error(e);
      });
    },
    onSearch() {
      let key = this.key;
      if (!key) return;
      this.currentPage = 1;
      this.active_area = 0;
      this.active_type = 0;
      window.scrollTo(0, 0);
      let cate = this.tabList[this.activeTab]['title'];
      document.title = `${this.baseTitle}-${cate}-"${key}"的搜索结果`;
      Toast.loading({ mask: false, loadingType: 'spinner', duration: 0 });
      this.initDb(this.cate, 'video_star').then(() => {
        this.videoModel.getTotalItemsByKey(this.cate, key).then(totalItems => {
          this.totalItems = totalItems;
          Toast.clear();
          if (totalItems === 0) {
            Toast.fail(`没有找到与'${key}'相关的${cate}`);
            this.datalist = [];
            return;
          }
          this.getPageByKey();
        });
      });
    },
    onTabBarChange() {
      this.currentPage = 1;
      window.scrollTo(0, 0);
      this.$router.push({
        name: 'list',
        params: {
          cate: this.activeTab + 1
        }
      });
    },
    onTabChange() {
      document.title = `${this.baseTitle}`;
      this.currentPage = 1;
      this.key = '';
      if (this.active_area || this.active_type) {
        Toast.loading({ mask: false, loadingType: 'spinner', duration: 0 });
        this.initDb(this.cate, 'video_msg').then(() => {
          let area = this.active_area ? this.areaArr[this.active_area - 1] : 0;
          let type = this.active_type ? this.typeArr[this.active_type - 1] : 0;
          // console.log([this.active_area - 1,area,this.active_type - 1,type]);
          this.videoModel
            .getTotalItemsByLabel(this.cate, type, area)
            .then(totalItems => {
              Toast.clear();
              this.totalItems = totalItems;
              this.getPageByLable(type, area);
            });
        });
      } else {
        this.refresh();
      }
    },
    onPageChange() {
      window.scrollTo(0, 0);
      if (this.key) {
        this.getPageByKey();
      } else if (this.active_area || this.active_type) {
        let area = this.active_area ? this.areaArr[this.active_area - 1] : 0;
        let type = this.active_type ? this.typeArr[this.active_type - 1] : 0;
        this.getPageByLable(type, area);
      } else {
        this.getPage();
      }
    },
    getPage() {
      window.scrollTo(0, 0);
      Toast.loading({ mask: false, loadingType: 'spinner', duration: 0 });
      this.videoModel.getPage(this.cate, this.currentPage, this.perPage).then(
        datalist => {
          this.datalist = datalist;
          Toast.clear();
        },
        err => {
          Toast.clear();
          Toast.fail('出错了...' + err);
        }
      );
    },
    getPageByKey() {
      window.scrollTo(0, 0);
      Toast.loading({ mask: false, loadingType: 'spinner', duration: 0 });
      this.videoModel
        .getPageByKey(this.cate, this.key, this.currentPage, this.perPage)
        .then(
          datalist => {
            this.datalist = datalist;
            Toast.clear();
          },
          err => {
            Toast.clear();
            Toast.fail('出错了...' + err);
          }
        );
    },
    getPageByLable(type, area) {
      window.scrollTo(0, 0);
      Toast.loading({ mask: false, loadingType: 'spinner', duration: 0 });
      this.videoModel
        .getPageByLable(this.cate, type, area, this.currentPage, this.perPage)
        .then(
          datalist => {
            this.datalist = datalist;
            Toast.clear();
          },
          err => {
            Toast.clear();
            Toast.fail('出错了...' + err);
          }
        );
    },
    refresh() {
      this.key = '';
      this.active_area = 0;
      this.active_type = 0;
      this.currentPage = 1;
      this.videoModel.getTotalItems(this.cate).then(totalItems => {
        this.totalItems = totalItems;
        this.getPage();
      });
    }
  }
};
</script>

<style lang="less">
.header {
  width: 100%;
  height: 55px;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  transition: top 0.5s;
  z-index: 9999;
  opacity: 0.98;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.main {
  width: 100%;
  margin-top: 55px;
  margin-bottom: 55px;
  .swipe {
    position: relative;
    .title {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-overflow: ellipsis;
      color: #fff;
      text-align: center;
      font-size: 14px;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
  .list {
    margin-bottom: 20px;
    .item {
      width: 33.3333333333333333vw;
      height: 57.5vw;
      float: left;
      .image-info {
        width: 32vw;
        background: #fff;
        margin: 0 auto;
        box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
        .image {
          width: 32vw;
          height: 44vw;
          box-sizing: border-box;
        }
        .info {
          padding: 2px;
          .title {
            line-height: 16px;
            max-height: 16px;
            overflow: hidden;
            font-size: 13px;
            text-align: center;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .icon {
            text-align: right;
            span.time {
              margin-right: 3px;
              font-size: 13px;
              color: #999;
              .van-icon {
                vertical-align: middle;
                padding-bottom: 4px;
              }
            }
            span.like {
              margin-right: 3px;
              font-size: 13px;
              color: #f00;
              .van-icon {
                vertical-align: middle;
                padding-bottom: 4px;
              }
            }
            span.fire {
              margin-right: 3px;
              font-size: 13px;
              color: darkred;
            }
          }
        }
      }
    }
  }
  h2.btt {
    font-size: 16px;
    background-color: #fbf8f8;
    text-align: center;
    padding: 10px 0;
    border: none;
    vertical-align: baseline;
    font-weight: 500;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    border-bottom: solid 3px #ff5722;
    div.right {
      font-size: 0.7em;
      display: block;
      margin-top: 5px;
      color: #989797;
    }
  }
}
</style>
